<template>
  <el-container>
    <el-main>
      <div class="textmain">
        <div class="left-content">
            <div class="left-from" style="overflow:auto">
              <el-form class="form-text " :disabled="disabled" ref="form" :model="form"  label-width="80px">
                <el-form-item label="文件标题" prop="subject">
                  <el-input v-model="form.subject" clearable></el-input>
                </el-form-item>
                <el-row>
                  <el-col class="line" :span="12">
                    <el-form-item label="拟稿部门" prop="writerdept">
                      <el-input v-model="form.writerdept" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="12">
                    <el-form-item label="拟稿人" prop="writercn">
                      <el-input v-model="form.writercn"  clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="line" :span="12">
                    <el-form-item label="拟稿时间" prop="writedate">
                      <el-input v-model="form.writedate" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="12" >
                    <el-form-item label="字号">
                      <el-select v-model="form.fileword" placeholder="请选择字号">
                        <!-- <el-option v-for="item in fileWordList.filetype">
                          <span style="float: left">{{ item }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
                        </el-option> -->
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="line" :span="16">
                    <el-form-item label="文件编号" prop="fileno">
                      <el-input v-model="form.fileno" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="line" :span="12">
                    <el-form-item label="密级" prop="secretlevel">
                      <el-select v-model="form.secretlevel" placeholder="请选择密级">
                        <el-option label="一般" value="1"></el-option>
                        <el-option label="商密级" value="2"></el-option>
                        <el-option label="商机级" value="3"></el-option>
                        <el-option label="商绝级" value="4"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="12">
                    <el-form-item label="缓急" prop="urgencylevel">
                      <el-select v-model="form.urgencylevel" placeholder="请选择缓急">
                        <el-option label="一般" value="1"></el-option>
                        <el-option label="急" value="2"></el-option>
                        <el-option label="特级" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="line" :span="20">
                    <el-form-item label="主送" >
                      <el-input v-model="form.mainsend" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="line" :span="20">
                    <el-form-item label="抄报" >
                      <el-input v-model="form.copyreport" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="line" :span="20">
                    <el-form-item label="抄送" >
                      <el-input v-model="form.CopySend" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="left-button">
              <el-button  type="success" icon="el-icon-check" @click="exportPdf">导出正文</el-button>
            </div>
        </div>
        <div class="right-content">
            <div class="right-textArea">
              <!-- <iframe src='@/assets/wangEidtor/viewer.html' frameborder="0" style="width: 100%;height: 100%;"></iframe> -->
              <div id="wordContent">
                <div class="wc-header" v-text="this.form.redtitle"></div>
                <div class="wc-fileword" v-text="filewordStr"></div>
                <hr class="wc-line" />
                <div class="wc-content" v-html="this.form.wordcontenthtml"></div>

                <div class='wc-footer' v-text="this.form.rightdept"></div>
              </div>
            </div>
            <div class="right-files"   style="overflow:auto" >
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="handleChange"
                :file-list="fileList"
                :disabled="disabled">
                <!-- <el-button size="small" type="primary" >点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  //import viewer from '@/assets/wangEidtor/viewer.html'
  import
  {
    listFwgl,
    getFwgl,
    delFwgl,
    addFwgl,
    updateFwgl,
    exportFwgl,
    uploadFwglFiles,
    removeFwglFile,
    getFwglFiles
  }
  from '@/api/fwgl/form.js'
  import HtmlToPdf from '@/utils/htmlToPDF.js'
  export default {
    data() {
      return {
        form:null,
        fileList:[],
        editor: null,
        editorData: '',
        PDFdom : '',
        disabled:true,
        form: {
          papertitle: null,
          writerdept: null,
          writercn: null,
          writerid: null,
          writedate: null,
          fileword: null,
          fileyear: null,
          fileno: null,
          secretlevel: null,
          urgencylevel: null,
          subject: null,
          mainsend: null,
          copyreport: null,
          copysend: null,
          redtitle: null,
          wordcontent: null,
          wordcontenthtml: null,
          rightdept: null,
          leftdept: null,
          printtime: null,
          readers: null,
          author: null,
          signerpublish: null,
          docunid:null,
        },
      }

    },
    computed:{
      filewordStr(){
        return this.form.fileword+"〔"+this.form.fileyear+"〕号"
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      exportPdf(){
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        getPdf(document.getElementById('wordContent'),'正文')
      }
    },
    created() {
      //获取表单信息
      getFwgl('7E5DFBFFA830A13EEDB96B09FA7221D8').then((response) => {
        this.form =  response.data;

      }).then(() => {
        console.log(this.form)
      }),
      getFwglFiles('7E5DFBFFA830A13EEDB96B09FA7221D8').then(response => {
        //console.log(response)

        for(let file of response.rows ){
          this.fileList.push({
            name:file.filename,
            url:file.filepath
          })
          console.log(file)
        }

      })

    },
    mounted () {
    }
  }
</script>

<style>
  .textmain{

  }
  .left-content{
    width: 48%;
    height: 700px;
    float: left;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .12), 0 0 16px rgba(0, 0, 0, .04);
    padding: 10px;
  }
  .left-from{
    height: 90%;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
  }
  .left-button{
    margin-top: 10px;
    height: 15%;
    border-radius: 4px;
    /* border: 1px solid #f1f1f1; */
    padding-top: 2%;
    text-align: center;
  }
  .right-content{
    width: 48%;
    height: auto;
    float: right;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .12), 0 0 16px rgba(0, 0, 0, .04);
    padding: 10px;
  }
  .right-textArea{
    height: 80%;
  }
  .right-files{
    margin-top: 10px;
    height: 15%;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
    padding: 5px;
  }
  .form-text{
    padding: 5px;
  }
  .el-input.is-disabled .el-input__inner{
      background-color: #F5F7FA;
      border-color: #E4E7ED;
      color:#909399;;
      cursor: auto;
  }
  .el-checkbox__input.is-disabled+span.el-checkbox__label {
    color: #909399;
    cursor: auto;
  }
  .el-checkbox__input.is-disabled .el-checkbox__inner {
      background-color: #edf2fc;
      border-color: #DCDFE6;
      cursor: auto;
  }
  .el-radio__input.is-disabled+span.el-radio__label{
    color: #909399;
    cursor: auto;
  }
  .el-radio__input.is-disabled .el-radio__inner{
    cursor: auto;
  }
  .el-textarea.is-disabled .el-textarea__inner {
     background-color: #F5F7FA;
     border-color: #E4E7ED;
     color:#909399;;
     cursor: auto;
  }
  #wordContent{
    text-align: center;
    height: 100%;
  }
  #wordContent > .wc-header{
    color: red;
    font-size: 20px;
  }
  #wordContent > .wc-line{
    background-color: red;
    border:none;
    height: 4px;
  }
  #wordContent > .wc-content{
    overflow-y: auto;
    height: 70%;
  }
  #wordContent > .wc-fileword{
    margin-top: 10px;
    font-size: 14px;
  }
  #wordContent > .wc-footer{
    font-size: 14px;
    margin-top: 30px;
    text-align: right;
  }


</style>
